<template>
  <div class="page-box">
    <div class="search-box">
      <Row style="margin-bottom: 15px;">
        <Col span="4">
          <div style="margin-bottom: 5px;">姓名</div>
          <Input v-model="searchInfo.CPBI003" placeholder="请输入姓名" style="width:calc(100% - 15px)" />
        </Col>
        <Col span="4">
          <div style="margin-bottom: 5px;">身份证号</div>
          <Input style="width: calc(100% - 15px);" placeholder="请输入身份证号" v-model="searchInfo.CPBI002" />
        </Col>
        <Col span="4">
          <div style="margin-bottom: 5px;">性别</div>
          <Select v-model="searchInfo.CPBI005" placeholder="请选择性别" clearable filterable transfer="" style="width: calc(100% - 15px);">
            <Option :value="'0'" >男</Option>
            <Option :value="'1'" >女</Option>
          </Select>
        </Col>
        <Col span="4">
          <div style="margin-bottom: 5px;">年龄</div>
          <Input style="width: calc((100% - 35px) / 2);" v-model="searchInfo.start_age" />
          <span style="display: inline-block;width: 20px;text-align: center;">~</span>
          <Input style="width: calc((100% - 35px) / 2);" v-model="searchInfo.end_age" />
        </Col>
        <Col span="4">
          <div style="margin-bottom: 5px;">超龄</div>
          <Select v-model="searchInfo.isoverage" placeholder="请选择是否超龄" clearable filterable transfer="" style="width: calc(100% - 15px);">
            <Option :value="'Y'" >是</Option>
            <Option :value="'N'" >否</Option>
          </Select>
        </Col>
        <Col span="4">
          <div style="margin-bottom: 5px;">联系方式</div>
          <Input style="width: 100%;" placeholder="请输入联系方式" v-model="searchInfo.CPBI013" />
        </Col>
      </Row>
      <Row style="margin-bottom: 30px;">
        <Col span="4" v-if="this.$store.state.user.severUserInfo.company_grade === '2'">
          <div style="margin-bottom: 5px;">所在区县</div>
          <Select placeholder="请选择所在区县" v-model="searchInfo.CPWI023" filterable transfer="" clearable @on-change="getMailList2(4,searchInfo.CPWI023)" style="width:calc(100% - 15px)">
            <Option :value="item.code" v-for="item in mailList1" v-bind:key="item.code">{{item.name}}</Option>
          </Select>
          <!--        <Select v-model="searchInfo.CPWI023" filterable transfer="" style="width: calc(100% - 15px);" @on-change="getRegionList(searchInfo.CPWI023, 1)">-->
          <!--          <Option :value="item.CPSR001" v-for="item in reginList[0]" v-bind:key="item.CPSR001">{{item.CPSR002}}</Option>-->
          <!--        </Select>-->
        </Col>
        <Col span="4" v-if="this.$store.state.user.severUserInfo.company_grade === '2' || this.$store.state.user.severUserInfo.company_grade === '3'">
          <div style="margin-bottom: 5px;">所在街道</div>
          <Select placeholder="请选择所在街道" v-model="searchInfo.CPWI024" filterable transfer="" clearable @on-change="getMailList2(5, searchInfo.CPWI024)" style="width:calc(100% - 15px)">
            <Option :value="item.code" v-for="item in mailList2" v-bind:key="item.code">{{item.name}}</Option>
          </Select>
          <!--        <Select v-model="searchInfo.CPWI024" filterable transfer="" style="width: calc(100% - 15px);" @on-change="getRegionList(searchInfo.CPWI024, 2)">-->
          <!--          <Option :value="item.CPSR001" v-for="item in reginList[1]" v-bind:key="item.CPSR001">{{item.CPSR002}}</Option>-->
          <!--        </Select>-->
        </Col>
        <Col span="4">
          <div style="margin-bottom: 5px;">所在社区</div>
          <Select placeholder="请选择所在社区" v-model="searchInfo.CPWI025" filterable transfer="" clearable style="width:calc(100% - 15px)">
            <Option :value="item.code" v-for="item in mailList3" v-bind:key="item.code">{{item.name}}</Option>
          </Select>
          <!--        <Select v-model="searchInfo.CPWI025" filterable transfer="" style="width: calc(100% - 15px);" >-->
          <!--          <Option :value="item.CPSR001" v-for="item in reginList[2]" v-bind:key="item.CPSR001">{{item.CPSR002}}</Option>-->
          <!--        </Select>-->
        </Col>
        <Col span="4">
          <div style="margin-bottom: 5px;">政治面貌</div>
          <Select placeholder="请选择政治面貌" clearable v-model="searchInfo.CPBI008" filterable transfer="" style="width: calc(100% - 15px);">
            <Option :value="item.TYPECODE" v-for="item in dictList[0]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
          </Select>
        </Col>
        <Col span="4">
          <div style="margin-bottom: 5px;">任职情况</div>
          <Select placeholder="请选择任职情况" v-model="searchInfo.CPWI006" filterable clearable transfer="" style="width: calc(100% - 15px);">
            <Option :value="item.TYPECODE" v-for="item in dictList[1]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
          </Select>
        </Col>
        <Col span="4">
          <div style="margin-bottom: 5px;">注销原因</div>
          <Select placeholder="请选择注销原因" v-model="searchInfo.cancellation" clearable filterable transfer="" style="width: calc(100% - 15px);">
            <Option :value="item.TYPECODE" v-for="item in dictList[14]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
          </Select>
        </Col>
      </Row>
      <Row>
        <Col>
          <Button class="new-btn-sty" @click="findinit">
            <span>查 询</span>
          </Button>
          <Button class="b2" @click="showPerson(1)" >
            <img style="width: 14px;height: 10px;margin-right: 3px;margin-left:-6px;margin-bottom: 2px;" src="../../../assets/images/V2-new-view/icon-view2.png" alt="" srcset="">
            <span>查看</span>
          </Button>
        </Col>
      </Row>
    </div>
    <Table v-if="!isNoData" border stripe :columns="columns" :data="data" ref="personSelection" @on-select="selectTable" style="border-radius: 5px;" @on-selection-change="personSelection()">
      <template slot-scope="{row}" slot="cancellation">
        <span :value="item.TYPECODE" v-for="item in dictList[14]" v-bind:key="item.TYPECODE" v-if="row.cancellation == item.TYPECODE">{{item.TYPENAME}}</span>
      </template>
    </Table>
    <div v-if="isNoData" style="text-align: center;">
      <img style="width: 160px;height: 190px;margin: 20px;" src="@/assets/images/V2-new-view/icon-no-data.png" />
    </div>
    <Row v-if="loadData == true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Row type="flex" justify="center" class="page_style">
      <Page v-if="!isNoData" class-name="page-s-class" :total="totalnum" :current="currentPageNo"
            :page-size="currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size">
        <template>
          <span style="color: #C9C9C9;">共 <span style="color: #FFAB04">{{ totalnum }}</span> 条</span>
        </template>
      </Page>
    </Row>

    <Modal
      v-model="showModal"
      title="查看" width="1000px">
      <p slot="header" style="color:#B40001;text-align:left;font-size: 14px;font-weight: bold;">
        <span>查看</span>
      </p>
      <div style="width: 100%;">
        <Form :label-width="155" label-position="right">
          <Row :gutter="15">
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>唯一识别编号<span style="color: red">(必填)</span></div>
                </template>
                <Input disabled v-model="showinfo.CPBI001" type="text" style="width: 100%"></Input>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>身份证号<span style="color: red">(必填)</span></div>
                </template>
                <Input disabled v-model="showinfo.CPBI002" type="text" style="width: 100%"></Input>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>姓名<span style="color: red">(必填)</span></div>
                </template>
                <Input disabled v-model="showinfo.CPBI003" type="text" style="width: 100%"></Input>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>出生日期<span style="color: red">(必填)</span></div>
                </template>
                <Input disabled v-model="showinfo.CPBI004" type="text" style="width: 100%"></Input>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>性别<span style="color: red">(必填)</span></div>
                </template>
                <Select disabled v-model="showinfo.CPBI005" filterable transfer="" style="width: 100%;">
                  <Option :value="'0'">男</Option>
                  <Option :value="'1'">女</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>婚姻状况<span style="color: red">(必填)</span></div>
                </template>
                <Select disabled v-model="showinfo.CPBI006" filterable transfer="" style="width: 100%;">
                  <Option :value="item.TYPECODE" v-for="item in dictList[3]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>民族<span style="color: red">(必填)</span></div>
                </template>
                <Select disabled v-model="showinfo.CPBI007" filterable transfer="" style="width: 100%;">
                  <Option :value="item.TYPECODE" v-for="item in dictList[4]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>政治面貌<span style="color: red">(必填)</span></div>
                </template>
                <Select disabled v-model="showinfo.CPBI008" filterable transfer="" style="width: 100%;">
                  <Option :value="item.TYPECODE" v-for="item in dictList[0]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>是否退役士兵定向<span style="color: red">(必填)</span></div>
                </template>
                <Select disabled v-model="showinfo.CPBI009" filterable transfer="" style="width:100%;">
                  <Option :value="'Y'">是</Option>
                  <Option :value="'N'">否</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>是否军嫂定向<span style="color: red">(必填)</span></div>
                </template>
                <Select disabled v-model="showinfo.CPBI010" filterable transfer="" style="width:100%;">
                  <Option :value="'Y'">是</Option>
                  <Option :value="'N'">否</Option>
                </Select>
              </FormItem>
            </Col>
            <Row :gutter="15">
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div style="display: flex;align-items: center;justify-content: end">
                      是否为低保或低保边缘户子女
                      <!-- <div style="width:100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">是否为低保或低保边缘户子女
                      </div> -->
                      <span style="color: red">(必填)</span></div>
                  </template>
                  <Select disabled v-model="showinfo.CPBI011" filterable transfer="" style="width: 100%;">
                    <Option :value="'Y'">是</Option>
                    <Option :value="'N'">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>户籍地址<span style="color: red">(必填)</span></div>
                  </template>
                  <Input disabled v-model="showinfo.CPBI012" type="text" style="width:100%"></Input>
                </FormItem>
              </Col>
            </Row>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>联系方式<span style="color: red">(必填)</span></div>
                </template>
                <Input disabled v-model="showinfo.CPBI013" type="text" style="width: 100%"></Input>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>家庭住址<span style="color: red">(必填)</span></div>
                </template>
                <Input disabled v-model="showinfo.CPBI014" type="text" style="width: 100%"></Input>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>免冠照片<span style="color: red">(必填)</span></div>
                </template>
                <div v-for="(item, index) in fileUrlList" :key="index">
                  <img :src="item" :title="item" width="85px" height="100px"
                       style="color: #457eca; font-size: 14px;border-radius: 5px;"></img>
                </div>
              </FormItem>
            </Col>
            <Col span="12" style="margin-bottom: 10px;">
              <FormItem>
                <template #label>
                  <div>身份证正反上传<span style="color: red">(必填)</span></div>
                </template>
                <div v-for="(item, index) in fileUrlList2" :key="index" style="float: left; margin-right: 10px">
                  <img :src="item" :title="item" width="148px" height="105px"
                       style="color: #457eca; font-size: 14px;border-radius: 5px;"></img>
                </div>
                <div v-for="(item, index) in fileUrlList3" :key="index + '0'" style="float: left">
                  <img :src="item" :title="item" width="148px" height="105px"
                       style="color: #457eca; font-size: 14px;border-radius: 5px;"></img>
                </div>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <!--        <Row class="bench_search">-->
        <!--          <Col span="5" align="center">在职状态</Col>-->
        <!--          <Col span="6" >-->
        <!--            <Select disabled v-model="showinfo.CPBI017" filterable transfer="" style="width: 52.5%;">-->
        <!--              <Option :value="item.TYPECODE" v-for="item in dictList[5]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>-->
        <!--            </Select>-->
        <!--          </Col>-->
        <!--          <Col span="4" align="center">审批状态</Col>-->
        <!--          <Col span="9" >-->
        <!--            <Select disabled v-model="showinfo.CPBI018" filterable transfer="" style="width: 35%;">-->
        <!--              <Option :value="item.TYPECODE" v-for="item in dictList[6]" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>-->
        <!--            </Select>-->
        <!--          </Col>-->
        <!--        </Row>-->
        <!--        <Row class="bench_search" >-->
        <!--          <Col span="5" align="center" >银行卡号<span style="color: red">(必填)</span></Col>-->
        <!--          <Col span="6">-->
        <!--            <Input disabled v-model="showinfo.bankcardno" type="text" style="width: 52.5%"></Input>-->
        <!--          </Col>-->
        <!--          <Col span="4" align="center" >应发工资<span style="color: red">(必填)</span></Col>-->
        <!--          <Col span="9">-->
        <!--            <Input disabled v-model="showinfo.salary" type="text" style="width: 35%"></Input>-->
        <!--          </Col>-->
        <!--        </Row>-->
        <!--        &lt;!&ndash;是否兼职、是否兼职收入  &ndash;&gt;-->
        <!--        <Row class="bench_search" >-->
        <!--          <Col span="5" align="center" >是否兼职<span style="color: red">(必填)</span></Col>-->
        <!--          <Col span="6">-->
        <!--            <Select disabled v-model="showinfo.part_time_job" filterable transfer="" style="width: 52.5%;">-->
        <!--              <Option :value="'1'">是</Option>-->
        <!--              <Option :value="'0'">否</Option>-->
        <!--            </Select>-->
        <!--          </Col>-->
        <!--          <Col span="4" align="center" >是否兼职收入<span style="color: red">(必填)</span></Col>-->
        <!--          <Col span="9">-->
        <!--            <Select disabled v-model="showinfo.part_time_income" filterable transfer="" style="width: 35%;">-->
        <!--              <Option :value="'1'">是</Option>-->
        <!--              <Option :value="'0'">否</Option>-->
        <!--            </Select>-->
        <!--          </Col>-->
        <!--        </Row>-->
      </div>

      <div class="tabs">
        <div class="mk-active" v-show="active===0"></div>
        <div class="mk" v-show="active!==0"></div>
        <div class="tabsList">
          <div :class="active===index?'active':'tabsTab'"
               v-for="(item,index) in tabsList"
               :key="index"
               @click="tabs(index)">
            <div class="lang" v-if="index!==0"></div>
            <div class="name"
                 :style="index===0?'margin-left: 0;border-left: 0;padding-left: 0;':(active===index?'padding-left: 0;':'')">
              <img class="img"
                   :src="active===index?item.active_img:item.tab_img"
                   alt=""/>
              <div class="text2">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <transition v-if="active===0" :name="loading?transition:''">
          <Form :label-width="100" label-position="right">
            <Row :gutter="15">
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>毕业院校<span style="color: red">(必填)</span></div>
                  </template>
                  <Input disabled v-model="showinfo.CPEI002" type="text" style="width: 100%"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>所学专业<span style="color: red">(必填)</span></div>
                  </template>
                  <Input disabled v-model="showinfo.CPEI003" type="text" style="width: 100%"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>最高学历<span style="color: red">(必填)</span></div>
                  </template>
                  <Select disabled v-model="showinfo.CPEI004" filterable transfer="" style="width:100%;">
                    <Option :value="item.TYPECODE" v-for="item in dictList[7]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>学位<span style="color: red">(必填)</span></div>
                  </template>
                  <Select disabled v-model="showinfo.CPEI005" filterable transfer="" style="width: 100%;">
                    <Option :value="item.TYPECODE" v-for="item in dictList[8]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>毕业时间<span style="color: red">(必填)</span></div>
                  </template>
                  <DatePicker disabled type="date" v-model="showinfo.CPEI006" :transfer=true
                              style="width: 100%;"></DatePicker>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </transition>
        <transition v-if="active===1" :name="loading?transition:''">
          <Row>
            <Col span="24">
              <Table
                :no-data-text="`<div style='text-align: center;'><img style='width: 160px;height: 190px;margin: 20px;' src='${require('@/assets/images/V2-new-view/icon-no-data.png')}' /></div>`"
                border :columns="familyInfoTable" :data="familyInfoList" ref="familySelection2"
                @on-selection-change="familySelection()" style="margin-top: 10px">
                <template slot-scope="{ row }" slot="CPFI002">
                  <Input disabled v-model="row.CPFI002" type="text"></Input>
                </template>
                <template slot-scope="{ row }" slot="CPFI003">
                  <Select disabled v-model="row.CPFI003" filterable transfer="">
                    <Option :value="item.TYPECODE" v-for="item in dictList[9]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </template>
                <template slot-scope="{ row }" slot="CPFI004">
                  <Input disabled v-model="row.CPFI004" type="text"></Input>
                </template>
                <template slot-scope="{ row }" slot="CPFI005">
                  <Input disabled v-model="row.CPFI005" type="text"></Input>
                </template>
                <template slot-scope="{ row }" slot="CPFI006">
                  <Select disabled v-model="row.CPFI006" filterable transfer="">
                    <Option :value="item.TYPECODE" v-for="item in dictList[0]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </template>
                <template slot-scope="{ row, index }" slot="action1">
                  <Button disabled type="primary" @click="confirm(row, index)">确认</Button>
                </template>
              </Table>
            </Col>
          </Row>
        </transition>
        <transition v-if="active===2" :name="loading?transition:''">
          <Form :label-width="140" label-position="right">
            <Row :gutter="15">
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>社会工作师资格</div>
                  </template>
                  <Select disabled v-model="showinfo.CPWI002" filterable transfer="" style="width: 100%;">
                    <Option :value="item.TYPECODE" v-for="item in dictList[10]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>工作师资格取得时间</div>
                  </template>
                  <DatePicker disabled type="date" v-model="showinfo.CPWI003" :transfer=true
                              style="width: 100%;"></DatePicker>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>所属市区<span style="color: red">(必填)</span></div>
                  </template>
                  <Select v-model="showinfo.CPWI023" disabled filterable transfer="" clearable
                          @on-change="getMailList2(4,showinfo.CPWI023)" style="width: 100%;">
                    <Option :value="item.code" v-for="item in mailList1" v-bind:key="item.code">{{ item.name }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>街道</div>
                  </template>
                  <Select v-model="showinfo.CPWI024" disabled filterable transfer="" clearable
                          @on-change="getMailList2(5, showinfo.CPWI024)" style="width: 100%;">
                    <Option :value="item.code" v-for="item in mailList2" v-bind:key="item.code">{{ item.name }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>社区<span style="color: red">(必填)</span></div>
                  </template>
                  <Select v-model="showinfo.CPWI025" disabled filterable transfer="" clearable style="width: 100%;">
                    <Option :value="item.code" v-for="item in mailList3" v-bind:key="item.code">{{ item.name }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>入职时间<span style="color: red">(必填)</span></div>
                  </template>
                  <DatePicker disabled type="date" v-model="showinfo.CPWI001" :transfer=true
                              style="width: 100%;"></DatePicker>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>任职情况<span style="color: red">(必填)</span></div>
                  </template>
                  <Select disabled v-model="showinfo.CPWI006" filterable style="width: 100%;">
                    <Option :value="item.TYPECODE" v-for="item in dictList[1]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>任职时间<span style="color: red">(必填)</span></div>
                  </template>
                  <DatePicker disabled type="date" v-model="showinfo.CPWI007" :transfer=true
                              style="width: 100%;"></DatePicker>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>党组织成员<span style="color: red">(必填)</span></div>
                  </template>
                  <Select disabled v-model="showinfo.CPWI011" filterable transfer="" style="width: 100%;">
                    <Option :value="'Y'">是</Option>
                    <Option :value="'N'">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>是否居委会成员</div>
                  </template>
                  <Select disabled v-model="showinfo.CPWI012" filterable transfer="" style="width: 100%;">
                    <Option :value="'Y'">是</Option>
                    <Option :value="'N'">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>笔试成绩<span style="color: red">(必填)</span></div>
                  </template>
                  <Input disabled v-model="showinfo.CPWI008" type="text" style="width: 100%;"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>面试成绩<span style="color: red">(必填)</span></div>
                  </template>
                  <Input disabled v-model="showinfo.CPWI009" type="text" style="width: 100%;"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>其他职业资格</div>
                  </template>
                  <Input disabled v-model="showinfo.CPWI004" type="text" style="width: 100%;"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>继续教育情况</div>
                  </template>
                  <Input disabled v-model="showinfo.CPWI015" type="text" style="width: 100%;"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>是否取得全科社工资格</div>
                  </template>
                  <Select disabled v-model="showinfo.CPWI016" filterable transfer="" style="width: 100%;">
                    <Option :value="'Y'">是</Option>
                    <Option :value="'N'">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>全科社工资格取得时间</div>
                  </template>
                  <DatePicker disabled type="date" v-model="showinfo.CPWI005" :transfer=true
                              style="width: 100%;"></DatePicker>
                </FormItem>
              </Col>
              <Col span="24" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>社会保险缴费记录<span style="color: red">(必填)</span></div>
                  </template>
                  <CheckboxGroup disabled v-model="showinfo.CPWI017">
                    <Checkbox label="01">养老保险</Checkbox>
                    <Checkbox label="02">医疗保险</Checkbox>
                    <Checkbox label="03">失业保险</Checkbox>
                    <Checkbox label="04">工伤保险</Checkbox>
                    <Checkbox label="05">生育保险</Checkbox>
                    <Checkbox label="06">住房公积金</Checkbox>
                  </CheckboxGroup>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>初次缴纳时间<span style="color: red">(必填)</span></div>
                  </template>
                  <DatePicker disabled type="date" v-model="showinfo.CPWI018" :transfer=true
                              style="width: 100%;"></DatePicker>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>是否有财政负担保险</div>
                  </template>
                  <Select disabled v-model="showinfo.financial_burden" filterable transfer="" style="width: 100%;">
                    <Option :value="'1'">是</Option>
                    <Option :value="'0'">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>其他财政负担保险<span style="color: red">(必填)</span></div>
                  </template>
                  <Input disabled v-model="showinfo.other_financial_burden" type="text" style="width: 100%;"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>是否连续缴纳<span style="color: red">(必填)</span></div>
                  </template>
                  <Select disabled v-model="showinfo.CPWI019" filterable transfer="" style="width: 100%;">
                    <Option :value="'Y'">是</Option>
                    <Option :value="'N'">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>接续缴纳时间</div>
                  </template>
                  <DatePicker disabled type="date" v-model="showinfo.CPWI020" :transfer=true
                              style="width: 100%;"></DatePicker>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>培训记录</div>
                  </template>
                  <Select disabled v-model="showinfo.CPWI014" filterable transfer="" style="width: 100%;">
                    <Option :value="item.TYPECODE" v-for="item in dictList[11]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>综合评定</div>
                  </template>
                  <Select disabled v-model="showinfo.CPWI013" filterable transfer="" style="width: 100%;">
                    <Option :value="'10'">优秀</Option>
                    <Option :value="'20'">称职</Option>
                    <Option :value="'40'">不称职</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>离职时间</div>
                  </template>
                  <DatePicker disabled type="date" v-model="showinfo.CPWI021" :transfer=true
                              style="width: 100%;"></DatePicker>
                </FormItem>
              </Col>
              <Col span="24" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>人员类型</div>
                  </template>
                  <CheckboxGroup disabled v-model="showinfo.personnel_type">
                    <Checkbox label="1">村(社区)党组织成员</Checkbox>
                    <Checkbox label="2">村(居)委员会成员</Checkbox>
                    <Checkbox label="3">村(社区)专职人员</Checkbox>
                    <Checkbox label="4">乡镇(街道)派驻人员</Checkbox>
                    <Checkbox label="5">社区网格员</Checkbox>
                    <Checkbox label="6">社区公益岗位</Checkbox>
                    <Checkbox label="7">村(居)务监督委员会成员</Checkbox>
                    <Checkbox label="8">村(居)民小组长</Checkbox>
                    <Checkbox label="9">其他人员</Checkbox>
                  </CheckboxGroup>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>是否返聘</div>
                  </template>
                  <Select disabled v-model="showinfo.back" filterable transfer="" style="width: 100%;">
                    <Option :value="'1'">是</Option>
                    <Option :value="'0'">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem>
                  <template #label>
                    <div>返聘原因</div>
                  </template>
                  <Input disabled v-model="showinfo.back_cause" type="text" style="width: 100%;"></Input>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </transition>
        <transition v-if="active===3" :name="loading?transition:''">
          <div>
            <Col span="24">
              <Table border
                     :no-data-text="`<div style='text-align: center;'><img style='width: 160px;height: 190px;margin: 20px;' src='${require('@/assets/images/V2-new-view/icon-no-data.png')}' /></div>`"
                     :columns="assessmentInfoTable" :data="assessmentInfoList"
                     ref="assessmentSelection2" @on-selection-change="assessmentSelection()" style="margin-top: 10px;">
                <template slot-scope="{ row }" slot="CPKI001">
                  <Select disabled v-model="row.CPKI001" filterable transfer="">
                    <Option :value="item.TYPECODE" v-for="item in dictList[12]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </template>
                <template slot-scope="{ row }" slot="CPKI002">
                  <DatePicker disabled type="date" v-model="row.CPKI002" :transfer="true"></DatePicker>
                </template>
                <template slot-scope="{ row }" slot="CPKI003">
                  <Select disabled v-model="row.CPKI003" filterable transfer="">
                    <Option :value="item.TYPECODE" v-for="item in dictList[13]" v-bind:key="item.TYPECODE">{{ item.TYPENAME }}</Option>
                  </Select>
                </template>
                <template slot-scope="{ row, index }" slot="action1">
                  <Button disabled type="primary" @click="confirm2(row, index)">确认</Button>
                </template>
              </Table>
            </Col>
          </div>
        </transition>
        <transition v-if="active===4" :name="loading?transition:''">
          <Form :label-width="100" label-position="right">
            <Row :gutter="15">
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem label="劳动合同">
                  <Select disabled v-model="showinfo.labor_contract" filterable transfer="" style="width: 100%">
                    <Option :value="'0'">否</Option>
                    <Option :value="'1'">是</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem label="劳动合同甲方">
                  <Input disabled v-model="showinfo.first_party" type="text" style="width: 100%"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem label="其他甲方">
                  <Input disabled v-model="showinfo.other_first_party" type="text" style="width: 100%"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem label="劳动关系证明">
                  <Input disabled v-model="showinfo.prove" type="text" style="width: 100%"></Input>
                </FormItem>
              </Col>
              <Col span="12" style="margin-bottom: 10px;">
                <FormItem label="其他证明">
                  <Input disabled v-model="showinfo.prove" type="text" style="width: 100%"></Input>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </transition>
      </div>
      <div slot="footer" style="text-align: left;">
        <i-button style="font-size: 12px;width: 64px;background-color: #B40001;height: 32px;line-height: 18px;" type="error" size="large" @click="showModal = false">确 认</i-button>
        <i-button style="font-size: 12px;width: 64px;background-color: #C9C9C9;height: 32px;line-height: 18px;border-color: #C9C9C9;color: #000000;margin-left: 15px;" type="error" size="large" @click="showModal = false">取 消</i-button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { getPersonCancellationList, getTypeNameList, getOffice, getPersonInfo } from '@/api/eventlist'
export default {
  data () {
    return {
      loading: false,
      tab_index: 0,
      transition: '',
      active: 0,
      tabsList: [
        {
          name: '教育信息',
          id: 0,
          tab_img: require('@/assets/images/V2-new-view/tabs/tab0.png'),
          active_img: require('@/assets/images/V2-new-view/tabs/active0.png')
        },
        {
          name: '亲属信息',
          id: 1,
          tab_img: require('@/assets/images/V2-new-view/tabs/tab1.png'),
          active_img: require('@/assets/images/V2-new-view/tabs/active1.png')
        },
        {
          name: '职业信息',
          id: 2,
          tab_img: require('@/assets/images/V2-new-view/tabs/tab2.png'),
          active_img: require('@/assets/images/V2-new-view/tabs/active2.png')
        },
        {
          name: '考核信息',
          id: 3,
          tab_img: require('@/assets/images/V2-new-view/tabs/tab3.png'),
          active_img: require('@/assets/images/V2-new-view/tabs/active3.png')
        },
        {
          name: '劳动合同',
          id: 4,
          tab_img: require('@/assets/images/V2-new-view/tabs/tab4.png'),
          active_img: require('@/assets/images/V2-new-view/tabs/active4.png')
        },
      ],
      fileUrlList: [],
      fileUrlList2: [],
      fileUrlList3: [],
      personSelectionList: [],
      selection: [],
      mailList1: [],
      mailList2: [],
      mailList3: [],
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      loadData: true,
      showModal: false,
      isNoData: false,
      showinfo: {},
      searchInfo: {},
      dictList: [],
      data: [],
      familyInfoList: [],
      assessmentInfoList: [],
      sessionInfoList: [],
      columns: [
        {
          type: 'index',
          width: 50,
          align: 'center'
        },
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        { title: '姓名', key: 'CPBI003', width: 120, align: 'center' },
        { title: '性别', key: 'sex', width: 70, align: 'center' },
        { title: '年龄', key: 'age', width: 70, align: 'center' },
        { title: '是否超龄', key: 'isoverage', width: 100, align: 'center' },
        { title: '身份证号', key: 'CPBI002', minWidth: 160, align: 'center' },
        { title: '政治面貌', key: 'CPBI008', width: 100, align: 'center' },
        { title: '联系方式', key: 'CPBI013', width: 120, align: 'center' },
        { title: '所在区县', key: 'city_name', width: 180, align: 'center' },
        { title: '所在街道', key: 'street_name', width: 180, align: 'center' },
        { title: '所在社区', key: 'company_name', width: 180, align: 'center' },
        { title: '任职情况', key: 'CPWI006', width: 100, align: 'center' },
        { title: '社工状态', key: 'CPBI018', width: 100, align: 'center' },
        { title: '注销原因', slot: 'cancellation', width: 100, align: 'center' }
        ],
      familyInfoTable: [
        {
          title: '序号',
          type: 'index',
          width: 50,
          align: 'center'
        },
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        { title: '亲属姓名(必填)', slot: 'CPFI002', minWidth: 90, align: 'center' },
        { title: '亲属关系(必填)', slot: 'CPFI003', minWidth: 60, align: 'center' },
        { title: '亲属联系方式(必填)', slot: 'CPFI004', minWidth: 90, align: 'center' },
        { title: '工作单位(必填)', slot: 'CPFI005', minWidth: 120, align: 'center' },
        { title: '政治面貌(必填)', slot: 'CPFI006', minWidth: 90, align: 'center' },
        { title: '操作', slot: 'action1', minWidth: 90, align: 'center' }
      ],
      assessmentInfoTable: [
        {
          title: '序号',
          type: 'index',
          slot: 'id',
          width: 50,
          align: 'center'
        },
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        { title: '考核类型', slot: 'CPKI001', minWidth: 90, align: 'center' },
        { title: '考核时间', slot: 'CPKI002', minWidth: 90, align: 'center' },
        { title: '考核成绩', slot: 'CPKI003', minWidth: 90, align: 'center' },
        { title: '操作', slot: 'action1', minWidth: 90, align: 'center' }
      ],
    }
  },
  methods: {
    tabs (index) {
      this.loading = true
      this.transition = index > this.index ? 'move-right' : 'move-left'// 显示动画逻辑
      this.index = index
      this.active = index
    },
    findinit () {
      this.currentPageNo = 1
      this.init()
    },
    init() {
      this.searchInfo.pageSize = this.currentPageSize
      this.searchInfo.pageNo = this.currentPageNo
      getPersonCancellationList(this.searchInfo).then(res => {
        if (res.data.errcode === 0) {
          let data = []
          this.isNoData = res.data.data.totalRecord <= 0
          res.data.data.results.forEach(function (temp, index) {
            if (temp.CPWI023 === '1') {
              temp.city_name = '社区工作者协会'
            }
            if (temp.CPWI024 === '1') {
              temp.street_name = '社区工作者协会'
            }
            data.push(temp)
          })
          this.data = data
          this.loadData = false
          this.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({
            title: '获取列表失败',
            desc: res.data.errmsg
          })
          this.loadData = false
        }
      })
    },
    getTypeName (id, index) {
      getTypeNameList({ typegroupcode: id }).then(res => {
        if (res.data.errcode === 0) {
          this.dictList[index] = res.data.data
        } else {
          this.$Notice.error({
            title: '获取字典列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getDictList () {
      this.getTypeName('political', 0)
      this.getTypeName('position', 1)
      this.getTypeName('cpbi018', 2)
      this.getTypeName('marriage', 3)
      this.getTypeName('nation', 4)
      this.getTypeName('incumbency', 5)
      this.getTypeName('sp_status', 6)
      this.getTypeName('degree', 7)
      this.getTypeName('academic', 8)
      this.getTypeName('lineal', 9)
      this.getTypeName('pqoswt', 10)
      this.getTypeName('train', 11)
      this.getTypeName('examType', 12)
      this.getTypeName('examresult', 13)
      this.getTypeName('cpCancel', 14)
    },
    size (pageSize) {
      this.currentPageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.currentPageNo = pageNo
      this.init()
    },
    getMailList (grade, code) {
      // this.searchInfo['grade' + (index + 1)] = 0
      getOffice({ grade: grade, code: code }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList1 = res.data.data
          let xiehui = {code: "1", name: "社区工作者协会", master: "社区工作者协会"}
          this.mailList1.push(xiehui)
          // this.mailList[index].unshift({ id: 0, title: '全部' })
          // this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    getMailList2 (grade, code) {
      // this.searchInfo['grade' + (index + 1)] = 0
      getOffice({ code: code }).then(res => {
        if (res.data.errcode === 0) {
          if (grade === 4) {
            this.mailList2 = res.data.data
            let xiehui = {code: "1", name: "社区工作者协会", master: "社区工作者协会"}
            this.mailList2.push(xiehui)
          } else if (grade === 5) {
            this.mailList3 = res.data.data
          }
          // this.mailList[index].unshift({ id: 0, title: '全部' })
          // this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    showPerson (type) {
      // this.addinfo.files = ''
      // this.addinfo.files2 = ''
      // this.addinfo.files3 = ''
      let election = this.$refs.personSelection.getSelection()
      if (this.selection.length > 1 || this.selection.length == 0) {
        this.$Notice.error({
          title: '获取人员信息失败',
          desc: '请选择一条记录'
        })
        return
      }
      if (type === 1) {
        this.showModal = true
      }

      this.fileUrlList = []
      this.fileUrlList2 = []
      this.fileUrlList3 = []

      let id = this.selection[0].ID
      getPersonInfo({ id: id }).then(res => {
        if (res.data.errcode === 0) {
          // res.data.data.salary  = parseInt(res.data.data.salary !== '' || undefined ? res.data.data.salary : 0) / 100
          this.showinfo = res.data.data
          if (res.data.data.CPBI015) {
            this.judge = true
            this.fileUrlList.push(res.data.data.CPBI015)
          } else {
            this.judge = false
          }
          if (res.data.data.CPBI016) {
            this.judge2 = true
            this.fileUrlList2.push(res.data.data.CPBI016)
          } else {
            this.judge2 = false
          }
          if (res.data.data.CPBI019) {
            this.judge3 = true
            this.fileUrlList3.push(res.data.data.CPBI019)
          } else {
            this.judge3 = false
          }
          // if (this.companyGrade === '2') {
          this.getMailList2(4,this.showinfo.CPWI023)
          this.showinfo.CPWI024 = res.data.data.CPWI024
          this.getMailList2(5,this.showinfo.CPWI024)
          // }
          // this.fileUrlList.push(res.data.data.CPBI015)
          // this.fileUrlList2.push(res.data.data.CPBI016)
          // this.fileUrlList3.push(res.data.data.CPBI019)
          this.index1 = this.fileUrlList.length - 1
          this.index2 = this.fileUrlList2.length - 1
          this.index3 = this.fileUrlList3.length - 1
          if (res.data.data.CPWI017 !== undefined) {
            this.showinfo.CPWI017 = res.data.data.CPWI017.toString().split(',')
          }
          if (res.data.data.personnel_type !== undefined) {
            this.showinfo.personnel_type = res.data.data.personnel_type.toString().split(',')
          }
          this.familyInfoList = res.data.data.familyInfoList
          this.assessmentInfoList = res.data.data.assessmentInfoList
          this.sessionInfoList = res.data.data.sessionInfoList
        } else {
          this.$Notice.error({
            title: '获取人员信息失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    personSelection () {
      this.personSelectionList = this.$refs.personSelection.getSelection()
    },
    selectTable (selection) {
      console.log(selection)
      this.selection = selection
    },
  },
  mounted() {
    this.getDictList()
    this.init()
    if (this.companyGrade < 3) {
      this.getMailList(2, null)
    } else if (this.companyGrade < 4) {
      this.getMailList2(4, this.companyCode)
    } else if (this.companyGrade < 5) {
      this.getMailList2(5, this.companyCode)
    }
  },
  computed: {
    companyGrade () {
      return this.$store.state.user.severUserInfo.company_grade
    },
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  }
}
</script>
<style scoped>
  .search-info-style {
    margin: 0px;
  }
  .item1{
    height: 42px;
    line-height: 40px;
  }
  .bench_search {
    margin-bottom: 10px;
  }

  .new-btn-sty {
    margin-right: 10px;
    color: #fff;
    background-color: #B40001;
    border-color: #B40001;
    font-weight: 500;
    font-size: 12px;
    min-width: 64px;
  }
  .new-btn-sty1{
    margin-right: 5px;
    color: #B40001;
    background-color: #FFFFFF;
    border-color: #B40001;
    font-weight: 500;
    font-size: 12px;
    min-width: 64px;
  }
  .page-box{
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #F2F2F2;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px;
  }
  .search-box{
    background-color: #F8F8F8;
    border-radius: 5px;
    padding: 15px;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
  .page_style {
    margin-top: 30px;
  }
  .page-s-class /deep/ .ivu-page-item-active{
    border-color: #FFAB04;
    background-color: #FFFAE8;
  }
  .page-s-class /deep/ .ivu-page-item-active a{
    color: #FFAB04;
  }
  .icon-search{
    position: absolute;
    top: 8px;
    right: 25px;
    width: 16px;
    height: 16px;
    z-index: 1;
  }
  /deep/ .ivu-table-fixed-header thead tr th, /deep/ .ivu-table-header thead tr th{
    font-size: 14px;
    font-weight: bold;
    color: #161616;
    background-color: #EFEFEF;
    border-color: #C9C9C9;
    height: 40px;
  }
  /deep/ .ivu-table td{
    height: 40px;
    color: #161616;
    border-color: #C9C9C9;
  }
  /* /deep/ .ivu-input{
    padding-right: 30px;
  } */
  /deep/ .ivu-page-item{
    background-color: #F8F8F8;
    border-radius: 5px;
    border-color: #F8F8F8;
  }
  /deep/ .ivu-page-prev, /deep/ .ivu-page-next{
    background-color: #F8F8F8;
    border-radius: 5px;
    border-color: #F8F8F8;
  }
  .search-box /deep/ .ivu-icon-ios-arrow-down:before{
    background-color: #C9C9C9;
    color: #131313;
    font-size: 16px;
    border-radius: 2px;
  }
  .search-box /deep/ .ivu-icon-ios-calendar-outline:before{
    background-color: #C9C9C9;
    color: #131313;
    font-size: 16px;
    border-radius: 2px;
  }

  .color16{
    color: #161616;
  }
  /deep/ .ivu-modal-header, /deep/ .ivu-modal-footer{
    border-bottom: 0;
    border-top: 0;
  }
  /deep/ .ivu-modal-header{
    padding: 30px 30px 20px;
    height: 70px;
  }
  /deep/ .ivu-modal-footer{
    padding: 0px 30px 30px;
  }
  /deep/ .ivu-modal-body{
    padding: 0px 30px 56px;
  }
  /deep/ .ivu-modal-close {
    font-size: 20px;
    right: 30px;
    top: 30px;
  }
  /deep/ .ivu-modal-close .ivu-icon-ios-close {
    font-size: 20px;
    color:black;
    background-color: #f6f4f4;
    border-radius:50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    top: -3px;
  }
  /deep/ .ivu-modal-content{
    border-radius: 10px;
  }
  .tabsTab {
    height: 40px;

  }
  .tabsTab .name {
    background: #efefef;
    border: 1px solid #fff;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: skew(30deg);
    height: 100%;
  }


  .tabsTab .name .text2 {
    transform: skew(-30deg);
    text-align: center;
  }

  .tabsTab .name .img {
    margin-right: 10px;
    transform: skew(-30deg);
    width: 14px;
    height: 14px;
  }


  .active {
    height: 50px;
    display: flex;
    align-items: center;
  }

  .active .lang {
    height: 100%;
    background: #F8F8F8;
    width: 58px;
    margin-left: -20px;
    transform: skew(-30deg);
  }

  .active .name {
    margin-left: -30px;
    height: 100%;
    background: #F8F8F8;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: skew(30deg);

  }

  .active .name .text2 {
    transform: skew(-30deg);
    text-align: center;
  }

  .active .name .img {
    margin-right: 10px;
    transform: skew(-30deg);
    width: 14px;
    height: 14px;
  }

  .tabs {
    height: 50px;
    position: relative;
  }

  .mk {
    position: absolute;
    height: 40px;
    width: 30px;
    top: 10px;
    background: #efefef;
    border: 1px solid #fff;
    left: 0;
    z-index: 0;
  }


  .mk-active {
    position: absolute;
    height: 50px;
    width: 30px;
    background: #f8f8f8;
    left: 0;
    z-index: 0;
    border-radius: 5px 0 0 0;
  }

  .tabsList {
    left: 15px;
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: flex-end;
  }

  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;

    .ivu-card-body {
      padding: 0px;
    }
  }
  .container {
    overflow-x: hidden;
    height: 240px;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 10px;
    border-radius: 0 5px 5px 5px;
    background: #f8f8f8;
    border: 1px solid #f8f8f8;
  }
  .b2 {
    margin-right: 10px;
    height: 32px;
    width: 64px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #b40001;
    font-family: "PingFang SC";
    font-weight: 400;
    font-size: 12px;
    text-align: center;
    color: #b40001;
  }
  /deep/ .ivu-checkbox-checked .ivu-checkbox-inner {
    border-color: #b40001;
    background-color: #b40001;
  }
</style>
